@font-face{
    font-family:ArmWrestler;
    src:url(ArmWrestler.ttf);
}

::selection{
    background-color:#9c0;
    color:#fff;
}

*{
    margin:0;
    padding:0;
    color:#999;
}

html{
    /*background-image:url(img/webtreats_wood-pattern8-512.jpg);*/
    background-color:#141414;
}


body{
    /*background:-webkit-linear-gradient(left,
    rgba(0,0,0,0.5) 15%,
    rgba(255,255,255,0.2) 45%,
    rgba(255,255,255,0.2) 55%,
    rgba(0,0,0,0.5) 85%);*/
    text-align:center;
    overflow:hidden;
    /*background:-webkit-linear-gradient(left,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0) 100%);*/
}

.wapper{
    max-width:960px;
    min-width:800px;
    margin:0 auto;
}

.light{
    position:absolute;
    height:600px;
    top:0;
    left:0;
    width:100%;
    min-width:800px;
    background:-webkit-gradient(radial, center center, 0, center center, 300, 
    from(rgba(20,20,20,0)),
    to(rgba(20,20,20,1)));
    background:-moz-radial-gradient(center center, circle closest-corner,
    rgba(20,20,20,0) 0,
    rgba(20,20,20,1) 300px);
    z-index:1;
}

header{
    height:600px;
    background-color:#979797;
    font-family:ArmWrestler;
    margin-bottom:300px;
}

header h1{
    font-size:100px;
    font-weight:bold;
    text-shadow:0px -55px 20px #141414;
    box-shadow:inset 0px -55px 20px #141414;
    line-height:140px;
    height:100px;
    overflow:hidden;
    padding-top:200px;
}

header p{
    /*text-shadow:rgba(255, 255, 255, 0.5) 0 5px 6px, rgba(255, 255, 255, 0.2) 1px 3px 3px;*/
    text-shadow:rgba(255, 255, 255, 0.5) 0 5px 6px, rgba(255, 255, 255, 0.2) 1px 3px 3px;
    background-color: rgba(0, 0, 0, 0.5);
    font-size:60px;
    -webkit-background-clip:text;
    font-weight:bold;
    color:transparent;
    margin-top:40px;
}

#play{
    width: 100px;
    height: 100px;
    line-height:100px;
    top:330px;
    left:50%;
    margin-left:-50px;
    z-index:2;
    border-radius:50px;
    cursor:pointer;
}

#play span{
    font-size:80px;
    font-weight:bold;
    color:hsla(0,0%,20%,1);
    text-shadow:hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
    
    -webkit-animation-name:go;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    
    
}

.navFix{
    position:fixed;
    top:0;
    left:0;
}

nav{
    display:none;
    height:80px;
    width:100%;
    position:absolute;
    left:0;
    bottom:10px;
    z-index:3;
}

nav div{
    height:80px;
    width:80px;
    display:inline-block;
    border-radius:40px;
}

nav div span{
    display:block;
    height:100%;
    width:100%;
    background-size:60px;
    background-repeat:no-repeat;
    background-position:center;
    opacity:0.3;
    cursor:pointer;
}

.navHover span, nav div span:hover{
    opacity:1;
}

.navHover, nav div:hover{
    background-color:#317100;
    background:-webkit-gradient(radial, center center, 0, center center, 25, 
    from(rgba(255,255,255,0.5)),
    to(rgba(255,255,255,0)));
    background:-moz-radial-gradient(center center, circle, 
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0) 25px);
}

#headIcon{
    background-image:url(img/home_w.png);
}

#nplayerIcon{
    background-image:url(img/windows_media_player_w.png);
}

#sudokuIcon{
    background-image:url(img/16_w.png);
}

#contactIcon{
    background-image:url(img/mail_2_w.png);
}

section{
    display:none;
    height:500px;
    /*margin-top:200px;
    margin-bottom:200px;*/
    padding-top:100px;
    padding-bottom:400px;
    text-align:left;
    background:-webkit-gradient(radial, center center, 0, center center, 500,
    from(rgba(255,255,255,0.1)),
    to(rgba(255,255,255,0)));
}

section .next, section .pre{
    font-size:20px;
    font-weight:bold;
    text-shadow:2px 2px 2px black;
    position:relative;
    z-index:3;
    text-align:center;
    clear:both;
    cursor:pointer;
    color:#9c0;
    line-height:10px;
    margin-bottom:40px;
    margin-top:10px;
    
    -webkit-animation:navStep;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
}

section img{
    float:left;
    max-width:400px;
    margin:20px;
}

section h1{
    text-shadow:2px 2px 2px black;
    font-size:40px;
    color:#9c0;
    padding-bottom:10px;
}

section p{
    text-shadow:2px 2px 2px black;
    font-size:30px;
}

section p b{
    color:#E3E300;
}

section p i{
    color:#BF006F;
}

section p span{
    color:#E28800;
}

section p a{
    text-decoration:none;
    color:#E28800;
}

section p a:hover{
    background-color:#E28800;
    color:white;
}

#Contact img{
    clear:both;
    height:68px;
    width:68px;
}

#Contact div a{
    display:inline-block;
}

#Contact div a:hover{
    background:-webkit-gradient(radial, center center, 0, center center, 50,
    from(rgba(255,255,255,0.5)),
    to(rgba(255,255,255,0)));
}

#Contact{
    text-align:center;
}

footer{
    height:300px;
}
